<template>
  <div class="app-container">
    <!-- 工具栏 -->
    <tl-list-toolbar class="tl-list-toolbar" ref="toolbar" :refMainTable="$refs.mainTable" currentModuleTableCode="MpmProjectBidGuide/main" :startColumn="4" @exportExcel="doExportExcel" @add="openAddDialog('editForm')" @refresh="doRefresh" @columnCustomize="doColumnCustomize" @displaySearch="doDisplaySearch" :isDisplayAdd="false" :isDisplayRight="false" :isDisplayDeleteBatch="false">
      <template slot="left-btn">
        <tl-attachment ref="attachmentRef" sourceType="MpmProjectBidGuide" :sourceId="projectinfo.id">
          <el-button type="primary" icon="el-icon-paperclip" @click="$refs.attachmentRef.openUploadDialog()">{{ this.$refs.attachmentRef ? this.$refs.attachmentRef.btnTitle : "" }} [{{ this.$refs.attachmentRef ? (this.$refs.attachmentRef.fileList.length > 0 ? this.$refs.attachmentRef.fileList.length : this.$refs.attachmentRef.fileCount) : 0 }}] </el-button>
        </tl-attachment>
      </template>
    </tl-list-toolbar>
    <div>
      <!-- 列表选择 -->
      <div class="table-alert-div" ref="selector">
        <el-alert type="success" :closable="false" class="tl-table-alert-info" effect="light">
          <template slot="title">
            已选择&nbsp;<a class="tl-table-alert-info-a1">{{ selectedRowKeys.length }}</a
            >项&nbsp;&nbsp;
            <a class="tl-table-alert-info-a2" @click="doClearSelected">全部清空</a>
          </template>
        </el-alert>
      </div>

      <!--表格渲染-->
      <el-table :key="tableKey + 'bidGuide'" class="tl-table" ref="mainTable" :span-method="mergeRows" height="450px" resizable-key="tableHeight" :resizable-refs="tableResizeRefs" v-loading="loading" :data="datas" @row-dblclick="doRowDbClick" @selection-change="doSelectChange" row-key="id" border fit :row-class-name="doChangeRowClassName">
        <el-table-column type="index" label="序号" width="55px" align="center"></el-table-column>
        <el-table-column prop="milepostname" label="里程碑及任务名称" width="150px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="taskname" label="任务名称" width="180px" align="left" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="disptaskstate" label="任务状态" width="80px" sort-by="taskstate" align="center" header-align="center" :show-overflow-tooltip="true">
          <template v-slot="scope">
            <el-tag :type="changeStateType(scope.row.taskstate)">
              {{ scope.row.disptaskstate }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column  label="责任人" prop="responsible" width="140px" align="center" header-align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            {{scope.row.responsible}}[{{scope.row.responsiblecode}}]
          </template>
        </el-table-column>
        <el-table-column prop="taskfeedbackdetail" label="完成情况" min-width="250px" align="left" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="planenddate" label="计划完成日期" width="110px" align="center" header-align="center" :formatter="dateFormat" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="actualenddate" label="实际完成日期" min-width="110px" align="left" header-align="center" :formatter="dateFormat" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="taskattachments" label="附件" min-width="80px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <!-- <el-table-column prop="description" label="备注" min-width="100px" align="left" header-align="center" :show-overflow-tooltip="true"></el-table-column> -->
      </el-table>
      <tl-edit ref="editForm" @refresh="refreshForEdit" :projectinfo="projectinfo"></tl-edit>
    </div>
  </div>
</template>

<script>
/** mixins */
import { mixin_list } from "@tapui/mixins/mixin_list"
import tlEdit from '../mpmProjectTask/editAttachment'
/** 工具类 */
import { Loading } from "element-ui"
import { getAction, putAction, postAction, deleteAction } from "@tapui/utils/http"
export default {
  name: "mpmProjectBidGuide",
  mixins: [mixin_list],
  components: { tlEdit },
  data() {
    return {
      urlPrefix: "/mpm/projectMilepost/",
      url: {
        list: "/mpm/projectMilepost/bidGuideList",
        queryCodeList: "/mpm/projectMilepost/dataCodeList",
        exportExcel: "/mpm/projectMilepost/exportBidGuideExcel"
      },
      queryParam: {
        projectcode: this.projectinfo.projectcode
      },
      // 计算合并行
      spanArrayMilePostName: [],
      pos: 0,
      tableKey: 0
    }
  },
  props: {
    projectinfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  methods: {
    refreshForEdit(dateChanged) {
      this.doRefresh()
    },
    /** 改变任务状态标签颜色 */
    changeStateType(state) {
      return state === '0' ? 'info' : state === '-1' ? 'danger' : state === '2' ? 'success' : ''
    },
    mergeRows({ row, column, rowIndex, columnIndex }) {
      if (column.property === "milepostname") {
        const _row = this.spanArrayMilePostName[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
    afterLoadData() {
      this.initSpanArrayMilePostName()
      this.tableKey++
    },
    initSpanArrayMilePostName() {
      this.spanArrayMilePostName = []
      for (var i = 0; i < this.datas.length; i++) {
        if (i === 0) {
          this.spanArrayMilePostName.push(1)
          this.pos = 0
        } else {
          // 判断当前元素与上一个元素是否相同
          if (this.datas[i].milepostname === this.datas[i - 1].milepostname) {
            this.spanArrayMilePostName[this.pos] += 1
            this.spanArrayMilePostName.push(0)
          } else {
            this.spanArrayMilePostName.push(1)
            this.pos = i
          }
        }
      }
    },
    /** 表格双击事件 */
    doRowDbClick(row, column, event) {
      this.openViewDialog('editForm', row[this.$refs.mainTable.rowKey])
    }
  }
}
</script>

<style lang="scss" scoped></style>
